<template>
  <div class="wrapper">
    <el-card class="box-card" style="width:200px;margin-right:20px">
      <div slot="header" class="clearfix"><span>组合动作</span>
        <el-button @click="handleExport" style="float: right; padding: 3px 0" type="text">导出JSON</el-button>
      </div>
      <div v-for="(item, k) in tableData" :key="k" class=" card_item">
        <div>{{ item.name }}</div>
        <div>
          <el-button type="primary" size="mini" circle icon="el-icon-top" @click="handleClickUp(item, k)" v-if="k != 0">
          </el-button>
          <el-button type="primary" size="mini" circle icon="el-icon-bottom" @click="handleClickDown(item, k)"
            v-if="k != tableData.length - 1"></el-button>
        </div>
      </div>
    </el-card>

    <el-table :data="tableData" border :row-key="getRowKey" align="left" style="width: 800px;margin-right:20px"
      height="600">
      <el-table-column label="动作编码" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.ID" size="mini" placeholder="请选择">
            <el-option v-for="item in enAutoActCode" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="组合动作名称" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" size="mini" placeholder="请输入内容"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="动作类型" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.Type" size="mini" placeholder="请选择">
            <el-option v-for="item in enCombinedControlType" :key="item.key" :label="item.name" :value="item.key">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="主动作码" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.MainActCode" size="mini" placeholder="请选择">
            <el-option v-for="item in enActionCode" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="序列参数组" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.ParaIDs" multiple="" size="mini" placeholder="请选择">
            <el-option v-for="item in enParaID" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="支持类型" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.shieldTypeOpt" size="mini" multiple="" placeholder="请选择">
            <el-option v-for="item in enShieldType" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <!-- <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="col[index].prop" :label="item.label">
        <template slot-scope="scope">
          <span >{{ index}}</span>
        </template>
      </el-table-column> -->
      <el-table-column fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <el-button @click="handleUpdata(scope.row)" type="text" size="small">更新</el-button>
          <el-button @click="handleSetting(scope.row)" type="text" size="small">配置动作</el-button>
          <el-button @click="handleExportCfgActionElment(scope.row,scope.$index)" type="text" size="small">
            导出CfgActionElment</el-button>
          <el-button @click="handleDelete(scope.row,scope.$index)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-card class="box-card" style="width:220px;">
      <div slot="header" class="wrapper flex_center">
        <div style="margin-right:12px">工具栏</div>
        <div>
          <el-button type="primary" size="mini" circle icon="el-icon-plus" @click="handleClickAdd"></el-button>
          <el-button type="primary" size="mini" circle icon="el-icon-edit" @click="showEditor = !showEditor">
          </el-button>
          <el-button type="primary" size="mini" circle icon="el-icon-delete" @click="showDelete = !showDelete">
          </el-button>
        </div>
      </div>
      <div v-for="(item, k) in toolsList" :key="k" class="card_item">
        <div class=" ">
          <el-button type="warning" size="mini" circle icon="el-icon-star-on"></el-button>
          <el-popconfirm @confirm="handlePushToolToTable(item)" title="确定增加这个组合么？">
            <el-button size="mini" slot="reference" round>{{ item.name }}</el-button>
          </el-popconfirm>
        </div>
        <div>
          <el-button type="primary" size="mini" circle icon="el-icon-edit" v-if="showEditor"
            @click="handleClickEditor(item, k)"></el-button>
          <el-button type="primary" size="mini" circle icon="el-icon-delete" v-if="showDelete"
            @click="handleClickDelete(item, k)"></el-button>
        </div>
      </div>
    </el-card>
    <el-dialog :title="dialogTitle ? '添加工具项' : '更改工具项'" :visible.sync="dialogVisible" width="50%">
      <el-form ref="form" :model="form" inline label-width="120px">
        <el-form-item label="动作编码">
          <el-select v-model="form.ID" placeholder="请选择">
            <el-option v-for="item in enAutoActCode" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组合动作名称">
          <el-input v-model="form.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="动作类型">
          <el-select v-model="form.Type" placeholder="请选择">
            <el-option v-for="item in enCombinedControlType" :key="item.key" :label="item.name" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主动作码">
          <el-select v-model="form.MainActCode" placeholder="请选择">
            <el-option v-for="item in enActionCode" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="序列参数组">
          <el-input v-model="form.ParaIDs" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="支持类型">
          <el-select v-model="form.shieldTypeOpt" placeholder="请选择">
            <el-option v-for="item in enShieldType" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  // import vuedraggable from 'vuedraggable'
  import Sortable from 'sortablejs';
  import enAutoActCode from './data/enAutoActCode';
  import enCombinedControlType from './data/enCombinedControlType';
  import enActionCode from './data/enActionCode';
  import enParaID from './data/enParaID';
  import enShieldType from './data/enShieldType';
  import InDB from './utils/initDB.js'
  import exportJson from "./utils/exportJson.js"

  export default {
    name: 'settingActionsOperation',
    components: {
      // vuedraggable
    },
    data() {
      return {
        enAutoActCode: enAutoActCode,
        enActionCode: enActionCode,
        enCombinedControlType: enCombinedControlType,
        enParaID: enParaID,
        enShieldType: enShieldType,
        showDelete: false,
        showEditor: false,
        dialogVisible: false,
        dialogTitle: false,
        form: {},
        toolsChangeKey: null,
        toolsList: [],
        tableData: []
      };
    },

    methods: {
      handleExportCfgActionElment(r) {},
      handleExport() {
        exportJson(this.tableData, 'cfgCombineControlDefine')
      },
      handleSetting(r) {
        this.$router.push({
          path: "/settingActionsOperation",
          query: {
            id: r.id
          }
        })
      },
      handleDelete(r, i) {
        this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            InDB.CfgCombineControlDefine.delete(r.id).then(() => {
              this.tableData.splice(i, 1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },
      handleUpdata(r) {
        InDB.CfgCombineControlDefine.put({
          ...r
        }).then(() => {
          this.$message({
            type: 'success',
            message: '更新成功!'
          });
        })
      },
      handlePushToolToTable(r) {
        InDB.CfgCombineControlDefine.put({
          ...r
        }).then(res => {
          InDB.CfgCombineControlDefine.all().then(res => {
            this.tableData = res
          })
        })
      },
      handleClickEditor(r, k) {
        this.toolsChangeKey = k;
        this.form = {
          ...r
        };
        this.dialogTitle = false;
        this.dialogVisible = true;
      },
      onSubmit() {
        // if (this.dialogTitle == false && this.toolsChangeKey) {
        //   this.toolsList[this.toolsChangeKey] = this.form;
        //   this.dialogVisible = false;
        //   return;
        // }
        InDB.defineTools.put({
          ...this.form
        }).then(() => {
          InDB.defineTools.all().then(res => {
            this.toolsList = res
            this.dialogVisible = false;
          })
        })
      },
      handleClickDelete(r, k) {
        this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            InDB.defineTools.delete(r.tool_id).then(() => {
              this.toolsList.splice(k, 1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },
      handlePushTable(r) {
        this.tableData.push(r);
      },
      handleClick(r) {
        console.log(r);
      },
      handleClickAdd() {
        this.dialogTitle = true;
        this.form = {};
        this.dialogVisible = true;
      },
      handleClickUp(r, k) {
        if (k == 0) {
          return;
        }
        this.tableData[k] = this.tableData.splice(k - 1, 1, this.tableData[k])[0];
      },
      handleClickDown(r, k) {
        if (k == this.tableData.length - 1) {
          return;
        }
        this.tableData[k] = this.tableData.splice(k + 1, 1, this.tableData[k])[0];
        console.log(r);
      },
      getRowKey(row) {
        return row.id;
      },
      //行拖拽
      rowDrop() {
        const tbody = document.querySelector('.el-table__body-wrapper tbody');
        const _this = this;
        Sortable.create(tbody, {
          onEnd({
            newIndex,
            oldIndex
          }) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0];
            _this.tableData.splice(newIndex, 0, currRow);
          }
        });
      }
    },
    updated() {},
    mounted() {
      document.body.ondrop = function(event) {
        event.preventDefault();
        event.stopPropagation();
      };
      this.rowDrop();
    },
    created() {
      InDB.CfgCombineControlDefine.all().then(res => {
        this.tableData = res
      })
      InDB.defineTools.all().then(res => {
        this.toolsList = res
      })
    }
  };
</script>

<style scoped>
  .flex {
    display: flex;
  }

  .flex_center {
    align-items: center;
  }

  .wrapper {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    width: 100%;
  }

  .card_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid #f6f6f6;
  }

  .card_item+.card_item {
    margin-top: 8px;
  }
</style>
